import type * as React from "react";

import { type SlateElementProps } from "platejs";

import { type VariantProps, cva } from "class-variance-authority";
import { SlateElement } from "platejs";

const headingVariants = cva("relative mb-1", {
  variants: {
    variant: {
      h1: "mt-[1.6em] pb-1 font-heading text-4xl font-bold",
      h2: "mt-[1.4em] pb-px font-heading text-2xl font-semibold tracking-tight",
      h3: "mt-[1em] pb-px font-heading text-xl font-semibold tracking-tight",
      h4: "mt-[0.75em] font-heading text-lg font-semibold tracking-tight",
      h5: "mt-[0.75em] text-lg font-semibold tracking-tight",
      h6: "mt-[0.75em] text-base font-semibold tracking-tight",
    },
  },
});

export function HeadingElementStatic({
  variant = "h1",
  ...props
}: SlateElementProps & VariantProps&lt;typeof headingVariants&gt;) {
  return (
    &lt;SlateElement
      as={variant!}
      className={headingVariants({ variant })}
      {...props}
    &gt;
      {props.children}
    &lt;/SlateElement&gt;
  );
}

export function H1ElementStatic(props: SlateElementProps) {
  return &lt;HeadingElementStatic variant="h1" {...props} /&gt;;
}

export function H2ElementStatic(
  props: React.ComponentProps&lt;typeof HeadingElementStatic&gt;,
) {
  return &lt;HeadingElementStatic variant="h2" {...props} /&gt;;
}

export function H3ElementStatic(
  props: React.ComponentProps&lt;typeof HeadingElementStatic&gt;,
) {
  return &lt;HeadingElementStatic variant="h3" {...props} /&gt;;
}

export function H4ElementStatic(
  props: React.ComponentProps&lt;typeof HeadingElementStatic&gt;,
) {
  return &lt;HeadingElementStatic variant="h4" {...props} /&gt;;
}

export function H5ElementStatic(
  props: React.ComponentProps&lt;typeof HeadingElementStatic&gt;,
) {
  return &lt;HeadingElementStatic variant="h5" {...props} /&gt;;
}

export function H6ElementStatic(
  props: React.ComponentProps&lt;typeof HeadingElementStatic&gt;,
) {
  return &lt;HeadingElementStatic variant="h6" {...props} /&gt;;
}
